<template>
  <div style="width:600px;height:300px" ref="chart"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    this.initCharts();
  },
  methods: {
    // 能耗趋势应用****
    initCharts() {
      let myChart = this.$echarts.init(this.$refs.chart);
      console.log(this.$refs.chart); // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgb(5, 102, 232)",
          formatter: function(params) {
            console.log(params);
            return `<div style='padding:0.1rem 0.3rem;'>
          <p style='font-size:16px;font-weight:800'>${params[0].value}<p>
          <p style='font-size:12px;font-weight:400'>${params[0].seriesName}</p>
          <div>`;
          }
        },
        lenged: {
          data: ["KW/h"]
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["18/01", "18/02", "18/03", "18/04", "18/05", "18/06", "18/07"],
          //设置轴线的属性
          axisLine: {
            lineStyle: {
              color: "rgb(29, 38, 117)",
              width: 2
            }
          },
          axisLabel: { color: "rgba(255,255,255,0.5)" } // 坐标轴字体颜色
        },
        yAxis: {
          name: "KW/h",
          nameTextStyle: {
            //y轴上方单位的颜色
            color: "rgba(255,255,255,0.5)"
          },
          type: "value",
          //设置轴线的属性
          axisLine: {
            lineStyle: {
              color: "rgb(29, 38, 117)",
              width: 2
            }
          },
          axisLabel: { color: "rgba(255,255,255,0.5)" }, // 坐标轴字体颜色
          splitLine: { show: false } //去除网格线
        },
        series: [
          {
            data: [10.0, 20.1, 30.2, 40.3, 30.4, 20.5, 10.6],
            symbol: "none", //这句就是去掉点的
            smooth: true, //这句就是让曲线变平滑的
            name: "KW/h",
            type: "line",
            itemStyle: {
              color: "rgb(190, 157, 52)"
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(190, 157, 52, 0.8)"
                },
                {
                  offset: 1,
                  color: "rgba(190, 157, 52, 0.1)"
                }
              ])
            }
          }
        ]
      });
    }
  }
};
</script>

<style>
</style>